第一个3D案例

作者：

用户Nqu0GRh0

Fork(复制)

AI补全

图库

下载

嵌入

设置

BUG反馈

index.html

main.js

package.json

            
                1
2
3
4
5
6
7
8
9
10
11
12
13

            
            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="./main.js"></script>
</body>
</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
29
30
31
32

            
            import * as THREE from 'three';

// 画布尺寸
const width = window.innerWidth;
const height = window.innerHeight;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000); // 视场角度fov; 画布宽高比; 近裁截面; 远裁截面
const renderer = new THREE.WebGLRenderer();

const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.6
}); // 材质(分为是否受光照影响)
const geometry = new THREE.BoxGeometry( 50, 90, 100 );
const mesh = new THREE.Mesh(geometry,material);
const axesHelper = new THREE.AxesHelper(150); // 坐标系

// 网格模型位置xyz坐标：0,10,0
mesh.position.set(0,10,0);

scene.add(mesh);
scene.add(axesHelper);

camera.position.set(200, 200, 200); // x,y,z
camera.lookAt(mesh.position); // 相机视角: 指向mesh设置的位置(中心点)

renderer.setSize(width, height);
renderer.render(scene, camera); // 执行渲染操作

document.body.appendChild(renderer.domElement); // 通过.domElement获得.render渲染方法生成的canvas画布

            
                1
2
3
4
5

            
            {
  "dependencies": {
    "three": "0.173.0"
  }
}

预览

控制台