\u4ece\u96f6\u5230\u4f01\u4e1a\u7ea7\u7684 Three.js \u5b8c\u6574\u7cfb\u7edf\u6559\u7a0b，\u4e13\u4e3a\u524d\u7aef\u5f00\u53d1\u8005\u6574\u7406，\u7ed3\u6784\u6e05\u6670\u3001\u7531\u6d45\u5165\u6df1\u3001\u65e0\u5e9f\u8bdd\u3001\u53ef\u76f4\u63a5\u5f53\u505a\u535a\u5ba2\u7b14\u8bb0\u3001\u5b66\u4e60\u624b\u518c\u3001\u9762\u8bd5\u590d\u4e60\u6587\u6863\u3002
\n\u8986\u76d6：\u57fa\u7840\u67b6\u6784 \u2192 \u76f8\u673a\/\u63a7\u4ef6\/\u5149\u7167\/\u9634\u5f71 \u2192 \u51e0\u4f55\u4f53\/\u6750\u8d28\/\u7eb9\u7406 \u2192 \u52a8\u753b\/\u4ea4\u4e92\/\u6a21\u578b\u52a0\u8f7d \u2192 \u7279\u6548\/\u540e\u5904\u7406 \u2192 \u5b9e\u6218\u9879\u76ee \u2192 \u6027\u80fd\u4f18\u5316\u3002<\/p>\n
Three.js \u662f\u57fa\u4e8e\u539f\u751f WebGL \/ WebGPU \u7684\u524d\u7aef 3D \u56fe\u5f62\u6e32\u67d3\u5f15\u64ce\u3002<\/p>\n
\u539f\u751f WebGL \u6781\u5176\u5e95\u5c42\u3001\u4ee3\u7801\u7e41\u7410\u3001\u9700\u8981\u624b\u52a8\u7ba1\u7406\u7f13\u51b2\u533a\u3001\u7740\u8272\u5668\u3001\u77e9\u9635\u3001\u5e27\u7f13\u5b58\u3002Three.js \u5bf9\u5e95\u5c42\u8fdb\u884c\u4e86\u9ad8\u5ea6\u5c01\u88c5，\u8ba9\u524d\u7aef\u53ef\u4ee5\u7528\u9762\u5411\u5bf9\u8c61\u7684\u65b9\u5f0f\u5feb\u901f\u5f00\u53d1 3D \u573a\u666f\u3002<\/p>\n
\u4e00\u53e5\u8bdd\u672c\u8d28：Three.js = \u524d\u7aef\u7684 3D \u6846\u67b6<\/p>\n
\u6570\u636e\u53ef\u89c6\u5316：3D \u5730\u56fe\u3001\u6570\u5b57\u5b6a\u751f\u3001\u5927\u5c4f\u6c99\u76d8<\/p>\n<\/li>\n
Web 3D \u5c55\u793a：\u5546\u54c1\u3001\u6237\u578b\u3001\u6c7d\u8f66\u3001\u6a21\u578b\u9884\u89c8<\/p>\n<\/li>\n
Web \u5c0f\u6e38\u620f\u30013D \u827a\u672f\u7279\u6548\u3001\u7c92\u5b50\u52a8\u753b<\/p>\n<\/li>\n
WebXR \/ VR \/ AR \u865a\u62df\u73b0\u5b9e\u573a\u666f<\/p>\n<\/li>\n<\/ul>\n
\u6240\u6709 Three.js \u753b\u9762，\u53ea\u7531\u4e09\u4e2a\u6838\u5fc3\u7ec4\u4ef6\u6784\u6210：<\/p>\n
Scene \u573a\u666f：3D \u4e16\u754c\u7684\u5bb9\u5668（\u821e\u53f0）<\/p>\n<\/li>\n
Camera \u76f8\u673a：\u89c2\u5bdf\u8005（\u4f60\u80fd\u770b\u5230\u4ec0\u4e48）<\/p>\n<\/li>\n
Renderer \u6e32\u67d3\u5668：\u7ed8\u5236\u753b\u9762（\u628a 3D \u753b\u5230\u753b\u5e03）<\/p>\n<\/li>\n
\u4e07\u80fd\u516c\u5f0f：3D\u753b\u9762 = \u573a\u666f + \u76f8\u673a + \u9010\u5e27\u6e32\u67d3<\/p>\n
npm create vite@latest three-demo — –template vanilla
\ncd three-demo
\nnpm install three
\nnpm run dev<\/p>\n
<script type="importmap">
\n{
\n "imports": {
\n "three": "https:\/\/unpkg.com\/three@0.160.0\/build\/three.module.js",
\n "three\/addons\/": "https:\/\/unpkg.com\/three@0.160.0\/examples\/jsm\/"
\n }
\n}
\n<\/script>
\n<script type="module">
\nimport * as THREE from 'three'
\n<\/script><\/p>\n
\u5305\u542b：\u573a\u666f\u3001\u76f8\u673a\u3001\u6e32\u67d3\u5668\u3001\u6297\u952f\u9f7f\u3001\u9002\u914d\u3001\u52a8\u753b\u5faa\u73af\u3001\u8f68\u9053\u63a7\u5236\u5668<\/p>\n
import * as THREE from 'three'
\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js'<\/p>\n
\/\/ 1. \u573a\u666f
\nconst scene = new THREE.Scene()<\/p>\n
\/\/ 2. \u76f8\u673a
\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000)
\ncamera.position.z = 5<\/p>\n
\/\/ 3. \u6e32\u67d3\u5668
\nconst renderer = new THREE.WebGLRenderer({ antialias: true })
\nrenderer.setSize(window.innerWidth, window.innerHeight)
\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
\ndocument.body.appendChild(renderer.domElement)<\/p>\n
\/\/ 4. \u63a7\u5236\u5668
\nconst controls = new OrbitControls(camera, renderer.domElement)
\ncontrols.enableDamping = true<\/p>\n
\/\/ 5. \u6d4b\u8bd5\u7269\u4f53
\nconst cube = new THREE.Mesh(
\n new THREE.BoxGeometry(1, 1, 1),
\n new THREE.MeshNormalMaterial()
\n)
\nscene.add(cube)<\/p>\n
\/\/ \u52a8\u753b\u5faa\u73af
\nfunction animate() {
\n requestAnimationFrame(animate)
\n controls.update()
\n cube.rotation.y += 0.01
\n renderer.render(scene, camera)
\n}
\nanimate()<\/p>\n
\/\/ \u7a97\u53e3\u9002\u914d
\nwindow.addEventListener('resize', () => {
\n camera.aspect = window.innerWidth \/ window.innerHeight
\n camera.updateProjectionMatrix()
\n renderer.setSize(window.innerWidth, window.innerHeight)
\n})<\/p>\n
\u6a21\u62df\u4eba\u773c，\u8fd1\u5927\u8fdc\u5c0f\u3001\u900f\u89c6\u7578\u53d8\u3002<\/p>\n
new THREE.PerspectiveCamera(FOV, \u5bbd\u9ad8\u6bd4, \u8fd1\u88c1\u526a\u9762, \u8fdc\u88c1\u526a\u9762)<\/p>\n
FOV：\u89c6\u573a\u89d2，\u8d8a\u5927\u8d8a\u5e7f\u89d2\u3001\u53d8\u5f62\u8d8a\u5f3a（45~75 \u6700\u4f73）<\/p>\n<\/li>\n
near：\u8fd1\u88c1\u526a\u9762，\u4e0d\u80fd\u8bbe 0<\/p>\n<\/li>\n
far：\u8fdc\u88c1\u526a\u9762，\u8fc7\u5927\u4f1a\u51fa\u73b0\u6df1\u5ea6\u6296\u52a8<\/p>\n<\/li>\n<\/ul>\n
\u7269\u4f53\u8fdc\u8fd1\u5927\u5c0f\u4e00\u81f4，\u9002\u5408 CAD\u30012.5D\u3001UI\u3001\u6c99\u76d8\u3002<\/p>\n
\u652f\u6301\u62d6\u62fd\u65cb\u8f6c\u3001\u6eda\u8f6e\u7f29\u653e\u3001\u53f3\u952e\u5e73\u79fb，\u662f\u6240\u6709 3D \u9879\u76ee\u6807\u914d\u3002<\/p>\n
const controls = new OrbitControls(camera, renderer.domElement)
\ncontrols.enableDamping = true \/\/ \u60ef\u6027\u987a\u6ed1
\ncontrols.dampingFactor = 0.04<\/p>\n
\/\/ \u7f29\u653e\u9650\u5236
\ncontrols.minDistance = 2
\ncontrols.maxDistance = 20<\/p>\n
\/\/ \u89d2\u5ea6\u9650\u5236（\u9632\u7a7f\u5e2e）
\ncontrols.maxPolarAngle = Math.PI \/ 2.1<\/p>\n
\/\/ \u81ea\u52a8\u65cb\u8f6c
\ncontrols.autoRotate = false
\ncontrols.autoRotateSpeed = 2<\/p>\n
\u26a0\ufe0f \u5fc5\u987b\u5728\u52a8\u753b\u5faa\u73af\u6267\u884c controls.update()<\/p>\n
\u5168\u5c40\u5747\u5300\u8865\u5149，\u65e0\u65b9\u5411\u3001\u65e0\u9634\u5f71，\u53ea\u63d0\u4eae\u573a\u666f\u3002<\/p>\n
\u65b9\u5411\u56fa\u5b9a\u3001\u53ef\u4ea7\u751f\u9ad8\u8d28\u91cf\u9634\u5f71，\u9879\u76ee\u4e3b\u5149\u9996\u9009\u3002<\/p>\n
\u706f\u6ce1\u6548\u679c，\u5411\u56db\u5468\u53d1\u6563，\u6709\u8870\u51cf\u3001\u6709\u9634\u5f71\u3002<\/p>\n
\u624b\u7535\u7b52\/\u821e\u53f0\u706f，\u9525\u5f62\u7167\u5c04\u3001\u8fb9\u7f18\u7fbd\u5316\u3002<\/p>\n
\u5929\u7a7a+\u5730\u9762\u6e10\u53d8，\u6a21\u62df\u81ea\u7136\u5ba4\u5916\u5929\u5149\u3002<\/p>\n
\u9634\u5f71\u5fc5\u987b\u56db\u6b65\u5168\u5f00，\u7f3a\u4e00\u4e0d\u663e\u793a：<\/p>\n
\/\/ 1. \u6e32\u67d3\u5668\u5f00\u542f\u9634\u5f71
\nrenderer.shadowMap.enabled = true
\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap<\/p>\n
\/\/ 2. \u5149\u6e90\u5f00\u542f\u9634\u5f71
\nlight.castShadow = true
\nlight.shadow.mapSize.set(2048, 2048)<\/p>\n
\/\/ 3. \u7269\u4f53\u6295\u5c04\u9634\u5f71
\nmesh.castShadow = true<\/p>\n
\/\/ 4. \u5730\u9762\u63a5\u6536\u9634\u5f71
\nfloor.receiveShadow = true<\/p>\n
\u9634\u5f71\u952f\u9f7f：\u63d0\u5347 mapSize<\/p>\n<\/li>\n
\u9634\u5f71\u6761\u7eb9\u95ea\u70c1：light.shadow.bias = -0.001<\/p>\n<\/li>\n
\u9634\u5f71\u8303\u56f4\u592a\u5c0f：\u8c03\u6574 shadow.camera \u89c6\u53e3<\/p>\n<\/li>\n<\/ul>\n
\u6240\u6709\u51e0\u4f55\u4f53\u5e95\u5c42\u90fd\u662f BufferGeometry \u9876\u70b9\u7f13\u51b2\u6570\u636e\u3002<\/p>\n
BoxGeometry \u7acb\u65b9\u4f53<\/p>\n<\/li>\n
SphereGeometry \u7403\u4f53<\/p>\n<\/li>\n
CylinderGeometry \u5706\u67f1<\/p>\n<\/li>\n
ConeGeometry \u5706\u9525<\/p>\n<\/li>\n
PlaneGeometry \u5e73\u9762<\/p>\n<\/li>\n
TorusGeometry \u5706\u73af<\/p>\n<\/li>\n
CapsuleGeometry \u80f6\u56ca\u4f53<\/p>\n<\/li>\n<\/ul>\n
\u624b\u52a8\u7ed8\u5236\u4e09\u89d2\u9762，\u81ea\u7531\u6784\u5efa\u4efb\u610f\u5f62\u72b6\u3002<\/p>\n
const geometry = new THREE.BufferGeometry()
\nconst points = new Float32Array([
\n -1, -1, 0,
\n 1, -1, 0,
\n 0, 1, 0
\n])
\ngeometry.setAttribute('position', new THREE.BufferAttribute(points, 3))
\ngeometry.computeVertexNormals()<\/p>\n
\u5c06 2D \u56fe\u5f62\u62c9\u4f38\u4e3a 3D \u7acb\u4f53，3D\u5730\u56fe\u3001\u697c\u5b87\u5efa\u6a21\u6838\u5fc3\u3002<\/p>\n
MeshBasicMaterial：\u7eaf\u8272\u65e0\u5149\u5f71<\/p>\n<\/li>\n
MeshNormalMaterial：\u6cd5\u7ebf\u8c03\u8bd5\u6750\u8d28<\/p>\n<\/li>\n<\/ul>\n
MeshLambertMaterial：\u6f2b\u53cd\u5c04\u3001\u65e0\u9ad8\u5149<\/p>\n<\/li>\n
MeshPhongMaterial：\u9ad8\u5149\u3001\u5851\u6599\u8d28\u611f<\/p>\n<\/li>\n<\/ul>\n
MeshStandardMaterial \u771f\u5b9e\u7269\u7406\u6e32\u67d3<\/p>\n
metalness \u91d1\u5c5e\u5ea6：0\u7edd\u7f18 \/ 1\u91d1\u5c5e<\/p>\n<\/li>\n
roughness \u7c97\u7cd9\u5ea6：0\u955c\u9762 \/ 1\u7c97\u7cd9<\/p>\n<\/li>\n<\/ul>\n
MeshPhysicalMaterial：\u652f\u6301\u6298\u5c04\u3001\u900f\u5149\u3001\u73bb\u7483\u3001\u8f66\u6f06<\/p>\n
map \u989c\u8272\u8d34\u56fe<\/p>\n<\/li>\n
normalMap \u6cd5\u7ebf\u51f9\u51f8\u8d34\u56fe<\/p>\n<\/li>\n
roughnessMap \u7c97\u7cd9\u5ea6\u8d34\u56fe<\/p>\n<\/li>\n
metalnessMap \u91d1\u5c5e\u5ea6\u8d34\u56fe<\/p>\n<\/li>\n
aoMap \u73af\u5883\u5149\u906e\u853d<\/p>\n<\/li>\n
displacementMap \u4f4d\u79fb\u8d34\u56fe<\/p>\n<\/li>\n
alphaMap \u900f\u660e\u8d34\u56fe<\/p>\n<\/li>\n
emissiveMap \u81ea\u53d1\u5149\u8d34\u56fe<\/p>\n<\/li>\n
envMap \u73af\u5883\u53cd\u5c04\u8d34\u56fe<\/p>\n<\/li>\n<\/ul>\n
const texture = new THREE.TextureLoader().load('xxx.jpg')
\ntexture.wrapS = THREE.RepeatWrapping
\ntexture.wrapT = THREE.RepeatWrapping
\ntexture.repeat.set(2,2)<\/p>\n
const clock = new THREE.Clock()
\nfunction animate(){
\n requestAnimationFrame(animate)
\n const t = clock.getElapsedTime()
\n cube.position.y = Math.sin(t) * 0.5
\n cube.rotation.y = t * 2
\n renderer.render(scene,camera)
\n}<\/p>\n
import gsap from 'gsap'
\ngsap.to(cube.position,{
\n x:2,
\n duration:1,
\n repeat:-1,
\n yoyo:true
\n})<\/p>\n
\u4ece\u76f8\u673a\u53d1\u5c04\u4e00\u6761\u5c04\u7ebf，\u7a7f\u900f\u573a\u666f\u7269\u4f53，\u5b9e\u73b0 hover\u3001\u70b9\u51fb\u62fe\u53d6\u3002<\/p>\n
const raycaster = new THREE.Raycaster()
\nconst mouse = new THREE.Vector2()<\/p>\n
window.addEventListener('mousemove',e=>{
\n mouse.x = (e.clientX \/ innerWidth) * 2 – 1
\n mouse.y = -(e.clientY \/ innerHeight) * 2 + 1
\n})<\/p>\n
function checkHover(){
\n raycaster.setFromCamera(mouse,camera)
\n const res = raycaster.intersectObjects(scene.children)
\n if(res.length){
\n console.log('\u9009\u4e2d\u7269\u4f53',res[0].object)
\n }
\n}<\/p>\n
GLB \/ GLTF：\u884c\u4e1a\u6807\u51c6\u3001\u4f53\u79ef\u5c0f\u3001\u8d34\u56fe\u52a8\u753b\u9f50\u5168\u3001\u9996\u9009<\/p>\n<\/li>\n
FBX：\u6a21\u578b\u5927\u3001\u517c\u5bb9\u8001\u9879\u76ee<\/p>\n<\/li>\n
OBJ：\u65e0\u52a8\u753b\u3001\u8001\u5f0f\u683c\u5f0f<\/p>\n<\/li>\n<\/ul>\n
import { GLTFLoader } from 'three\/addons\/loaders\/GLTFLoader.js'
\nconst loader = new GLTFLoader()<\/p>\n
loader.load('\/model.glb',gltf=>{
\n const model = gltf.scene
\n model.traverse(child=>{
\n if(child.isMesh){
\n child.castShadow = true
\n child.receiveShadow = true
\n }
\n })
\n scene.add(model)
\n})<\/p>\n
\u8f89\u5149\u3001\u666f\u6df1\u3001\u63cf\u8fb9\u3001AO\u3001\u8c03\u8272，\u5927\u5e45\u63d0\u5347\u753b\u9762\u8d28\u611f\u3002<\/p>\n
InstancedMesh \u5b9e\u4f8b\u5316\u6e32\u67d3（\u6d77\u91cf\u7269\u4f53）<\/p>\n<\/li>\n
DRACO \u6a21\u578b\u538b\u7f29<\/p>\n<\/li>\n
\u8d34\u56fe\u5c3a\u5bf8\u9650\u5236 1024\/2048<\/p>\n<\/li>\n
\u89c6\u9525\u4f53\u5254\u9664\u3001LOD \u591a\u7ea7\u7ec6\u8282<\/p>\n<\/li>\n
\u5c04\u7ebf\u68c0\u6d4b\u8282\u6d41\u3001\u9650\u5b9a\u68c0\u6d4b\u5bf9\u8c61<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Three.js \u96f6\u57fa\u7840\u7cfb\u7edf\u6559\u7a0b
\n\u524d\u8a00
\n\u4ece\u96f6\u5230\u4f01\u4e1a\u7ea7\u7684 Three.js \u5b8c\u6574\u7cfb\u7edf\u6559\u7a0b，\u4e13\u4e3a\u524d\u7aef\u5f00\u53d1\u8005\u6574\u7406，\u7ed3\u6784\u6e05\u6670\u3001\u7531\u6d45\u5165\u6df1\u3001\u65e0\u5e9f\u8bdd\u3001\u53ef\u76f4\u63a5\u5f53\u505a\u535a\u5ba2\u7b14\u8bb0\u3001\u5b66\u4e60\u624b\u518c\u3001\u9762\u8bd5\u590d\u4e60\u6587\u6863\u3002
\n\u8986\u76d6：\u57fa\u7840\u67b6\u6784 \u2192 \u76f8\u673a\/\u63a7\u4ef6\/\u5149\u7167\/\u9634\u5f71 \u2192 \u51e0\u4f55\u4f53\/\u6750\u8d28\/\u7eb9\u7406 \u2192 \u52a8\u753b\/\u4ea4\u4e92\/\u6a21\u578b\u52a0\u8f7d \u2192 \u7279\u6548\/\u540e\u5904\u7406 \u2192 \u5b9e\u6218\u9879\u76ee \u2192 \u6027\u80fd\u4f18\u5316\u3002
\n\u7b2c\u4e00\u7ae0 Three.js \u7b80\u4ecb\u4e0e\u73af\u5883\u642d\u5efa
\n1.1 \u4ec0\u4e48\u662f Three.js
\nThree.js \u662f\u57fa\u4e8e\u539f\u751f WebG<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[722,187,5299,190],"topic":[],"class_list":["post-100799","post","type-post","status-publish","format-standard","hentry","category-server","tag-ecmascript","tag-javascript","tag-threejs","tag-190"],"yoast_head":"\n