html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Three.js</title>
<style>
body { margin: 0; padding: 0; overflow: hidden }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer({canvas: document.getElementById('canvas'), antialias: true});
renderer.setClearColor(0xffffff);
renderer.setSize( window.innerWidth, window.innerHeight );
let ambLight = new THREE.AmbientLight(0xfffff, 0.5);
scene.add(ambLight);
let pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.set(0,10,5);
scene.add(pointLight);
let floorGeo = new THREE.CubeGeometry(2, 1, 1);
let floorMat = new THREE.MeshLambertMaterial({color: 0x0FF802});
let floor = new THREE.Mesh(floorGeo, floorMat);
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run