Codes►前端

threejs 01 入门

threejs 01 入门

实例

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
</head>
<body>
</body>
</html>
<script>
  // 创建一个场景
  const scene = new THREE.Scene();
  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0,0,20);
  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  // 添加一个立方体
  // 定义了一个立方体的对象
  const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
  // 创建材质
  const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000, wireframe: false });
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  // 添加到场景里
  scene.add(cube);
  // 添加一个球体
  const sphereGeometry = new THREE.SphereGeometry(1,10,10);
  const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00, wireframe: false });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.x = 3;
  sphere.position.y = 1;
  scene.add(sphere);
  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-10,10,10);
  scene.add(spotLight);
  const animation = () => {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
  }
  animation()
</script>