渲染器和前端UI界面，HTML代码在线实时编辑、实时预览

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

            
            <!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>
  <button id="download" type="button">下载</button>
</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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

            
            import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const width = window.innerWidth;
const height = window.innerHeight;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 3000);
const renderer = new THREE.WebGLRenderer({
  preserveDrawingBuffer: true, // 想把canvas画布上内容下载到本地，需要设置为true 
});

const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshPhongMaterial({
  color: '#049ef4',
  transparent: true,
  opacity: 0.6,
});
const mesh = new THREE.Mesh(geometry, material);
const pointLight = new THREE.DirectionalLight('#fff', 1); // 点光源
const ambientLight = new THREE.AmbientLight(0x404040, 2); // 环境光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 方向光
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10); // 光源辅助观察

const controls = new OrbitControls(camera, renderer.domElement);

pointLight.position.set(-200, 200, 200);
pointLight.castShadow = true;

directionalLight.position.set(5, 5, 5).normalize();
directionalLight.castShadow = true;

scene.add(mesh);
scene.add(pointLight);
scene.add(ambientLight);
scene.add(directionalLight);
scene.add(pointLightHelper);

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

renderer.setSize(width, height);
renderer.setClearColor(0x444444, 1);
renderer.render(scene, camera);

document.body.appendChild(renderer.domElement); 

const saveFile = () => {
  const canvas = renderer.domElement;
  const link = document.createElement('a');
  
  link.href = canvas.toDataURL('image/jpeg');
  link.download = 'test';
  link.click();
}

document.getElementById('download').addEventListener('click', saveFile)

controls.addEventListener('change', () => {
  renderer.render(scene, camera);
})

            
                1
2
3
4
5

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