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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="importmap">
{
"imports": {
"three": "./node_modules/three/build/three.module.js",
"OrbitControls": "./node_modules/three/examples/jsm/controls/OrbitControls.js",
"lil-gui":"./node_modules/three/examples/jsm/libs/lil-gui.module.min.js"
}
}
</script>
</head>
<body>
<canvas id="canvas" style="width: 100%;height: 100%;"></canvas>
<script type="module">
// 引入three.js
import * as THREE from 'three'
//引入orbitControls控制相机
import { OrbitControls } from 'OrbitControls'
//引入gui控制物体或者光源
import {GUI} from 'lil-gui'
const gui = new GUI()
const canvas = document.getElementById('canvas')
//获取canvas显示的宽高
const width = canvas.clientWidth
const height = canvas.clientHeight
//1.创建场景
const scene = new THREE.Scene()
//2.创建物体并添加进场景中。
const geometry = new THREE.BoxGeometry( 200, 200, 1000 ) //创建一个立方体
const material = new THREE.MeshLambertMaterial( { color: 0xffff00 } ) //创建MeshBasicMaterial一种网络基础材质以及颜色
const mesh = new THREE.Mesh(geometry,material)
mesh.position.set(1,10,1) //设置物体的方法
scene.add(mesh)
//3.设置相机。相机有两种，正交投影相机(OrthographicCamera)，透视相机(PerspectiveCamera)
//PerspectiveCamera有四个参数分别为fov视角角度，aspet宽高比，near近面，far远面
const camera = new THREE.PerspectiveCamera(120,width/height,0.1,1000)
camera.position.set(100,10,800) //设置视点
camera.lookAt(0,0,0) //设置观察点
camera.up.set(0,1,0) //设置相机的上方向，如果不设置的话默认是y轴。
//4.添加坐标轴
const axesHelper = new THREE.AxesHelper(1500)//参数为坐标轴的长度
scene.add(axesHelper)
// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) //给物体一个白色，强度为0.5的环境光
scene.add(ambientLight)
//5.渲染器设置。
const renderer = new THREE.WebGLRenderer({canvas:canvas})
renderer.setSize(width,height) //设置渲染的宽高，与canvas显示的宽高一致。
renderer.render(scene,camera) //将场景和相机放入渲染器
//6.鼠标拖动改变相机方向
const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', function () {
renderer.render(scene, camera) //执行渲染操作
})
//7.改变物体
let animateId
const animate =()=>{
renderer.render(scene,camera)
mesh.rotateY(0.01)
animateId = requestAnimationFrame(animate)
}
// setTimeout(()=>{cancelAnimationFrame(animateId)},1000)
animate()
//8.gui控制平行光
// 平行光
//设置平行光的颜色和强度
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(100, 100, 50)
// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh
// 可视化平行光
const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5)
console.log(directionalLight)
scene.add(directionalLight)
scene.add(dirLightHelper)
gui.add(directionalLight.position, 'x', 0, 1000).onChange(()=>{ renderer.render(scene, camera)})
gui.add(directionalLight.position, 'y', 0, 1000).onChange(()=>{ renderer.render(scene, camera)})
gui.add(directionalLight.position, 'z', 0, 1000).onChange(()=>{ renderer.render(scene, camera)})
</script>
</body>
|
