700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > three.js旋转 材质 灯光使用 —— 太阳地球月亮运动

three.js旋转 材质 灯光使用 —— 太阳地球月亮运动

时间:2023-01-29 00:57:04

相关推荐

three.js旋转 材质 灯光使用 ——  太阳地球月亮运动

import * as THREE from 'three'//引入控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'const { log } = console//创建场景const scene = new THREE.Scene();scene.background = new THREE.Color("#000")//scene.environment = new THREE.Color("#ddd")//创建相机添加至场景const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 10, 1)//创建渲染器const renderer = new THREE.WebGLRenderer({antialias: true // 搞锯齿})renderer.setSize(window.innerWidth, window.innerHeight)//添加辅助线const axes = new THREE.AxesHelper(5)//scene.add(axes)axes.position.set(0, 0, 0)//创建星球const createBall = (sizeArray) => {const spereGeometry = new THREE.SphereGeometry(...sizeArray)const spereMaterial = new THREE.MeshLambertMaterial()return new THREE.Mesh(spereGeometry, spereMaterial)}//创建地球组级太阳组const earchGroup = new THREE.Group()const sunGroup = new THREE.Group()const earch = createBall([1, 20, 20])earch.material.map = new THREE.TextureLoader().load('./earch.jpg')earchGroup.add(earch)const moon = createBall([.3, 20, 20])moon.material.map = new THREE.TextureLoader().load('./moon.png')earchGroup.add(moon)moon.position.set(0, 0, 2)earchGroup.add(moon)earchGroup.position.x = 6//scene.add(earchGroup)const spereGeometry = new THREE.SphereGeometry(2, 30, 30)const spereMaterial = new THREE.MeshBasicMaterial()const sun = new THREE.Mesh(spereGeometry, spereMaterial)sun.material.map = new THREE.TextureLoader().load('./sun.jpg')sunGroup.add(sun)sunGroup.add(earchGroup)scene.add(sunGroup)//添加环境 光// const alight = new THREE.AmbientLight("#FFF", .7)// scene.add(alight)//添加点光源const light = new THREE.PointLight({color: "0xff0000",intensity: 100});light.position.set(0, 0, 0);scene.add(light);//添加控制器,并设置阻尼const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = truedocument.body.appendChild(renderer.domElement)const clock = new THREE.Clock()const render = () => {const time = clock.getElapsedTime()earchGroup.rotation.y = timeearch.rotation.y = timemoon.rotation.y = timesunGroup.rotation.y = timecontrols.update()renderer.render(scene, camera)requestAnimationFrame(render)}render()

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。