threejs制作一个三维缆车上下山动画效果代码
代码语言:html
所属分类:三维
代码描述:threejs制作一个三维缆车上下山动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; height: 100%; } #canvas { position: absolute; width: 100%; height: 100%; overflow: hidden; background: #0a1424; opacity: 0.95; } </style> </head> <body> <!-- Inspired by https://dribbble.com/shots/9894256-Ski-Hill/attachments/1927981?mode=media --> <div id="canvas"></div> <script id="vertexShader" type="x-shader/x-vertex"> varying vec3 vNormal; void main() { vNormal = normalize( normalMatrix * normal ); gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script> <script id="fragmentShader" type="x-shader/x-vertex"> varying vec3 vNormal; void main() { float intensity = pow( 0.7 - dot( vNormal, vec3( 0.0, 0.0, 0.5 ) ), 4.0 ); gl_FragColor = vec4( 0.89, 0.82, 0.69, 1.0 ) * intensity; } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script> <script> const ColorsCableCar = { orange: 0xdf1209, red: 0xb60909, black: 0x0c0d0b, gray: 0x110e14, light: 0xf2c572, moonLight: 0xb38014 }; let scene, camera, controls, fieldOfView, aspectRatio, nearPlane, farPlane, renderer, container, hemisphereLight, spotLight, ambientLight, HEIGHT, WIDTH; const createScene = () => { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x1816eb, 10, 1500); aspectRatio = WIDTH / HEIGHT; fieldOfView = 60; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane ); camera.position.x = 0; camera.position.z = 300; camera.position.y = 100; camera.rotation.x = 50; renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(WIDTH, HEIGHT); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; container = document.getElementById("canvas"); container.appendChild(renderer.domElement); window.addEventListener("resize", handleWindowResize, false); controls = new THREE.OrbitControls(camera, renderer.domElement); var loader = new THREE.GLTFLoader(); loader.load( "//repo.bfw.wiki/bfwrepo/threemodel/env3.gltf", (gltf) => { gltf.scene.position.y = -100; gltf.scene.children.forEach((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(gltf.scene); } ); }; const handleWindowResize = () => { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); }; const createLights = () => { ambientLight = new THREE.AmbientLight(0x111111, 4); const houseLight = new THREE.PointLight(ColorsCableCar.light, 25, 25, 4); houseLight.position.set(-113, 10, 47); hemisphereLight = new THREE.HemisphereLight(0x0c0733, 5); spotLight = new THREE.SpotLight(0xc79461, 0.3); spotLight.castShadow = true; spotLight.shadow.bias = -0.0001; spotLight.shadow.mapSize.width = 1024 * 4; spotLight.shadow.mapSize.height = 1024 * 4; scene.add(ambientLight, houseLight, spotLight, hemisphereLight); }; function CableCar() { this.mesh = new THREE.Group(); let geomBox1 = new THREE.BoxGeometry(10, 4.5, 10, 1, 1, 1); geomBox1.vertices[7].y += 0.5; geomBox1.vertices[7].z -= 1; geomBox1.vertices[2].z -= 1; geomBox1.vertices[2].y += 0.5; geomBo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0