three.js学习(二)

组、交互、dat.gui的使用

1、组

就像可以把一些THREE创建的物体放到场景里一样，也可以把物体放到组里，然后再把组放到场景里
为什么要这么做呢？（这不是脱裤子放屁）
可以把放进组的物体看作一个整体

import * as THREE from 'three'
const w = window.innerWidth
const h = window.innerHeight
const scene = new THREE.Scene()
const axes = new THREE.AxesHelper(6)
scene.add(axes)
function createCube(color = 0xff0000){const geometry = new THREE.BoxGeometry(1,1,1)const material = new THREE.MeshBasicMaterial({color:color})return new THREE.Mesh(geometry,material)
}//  后面的列子修改的是这里
const cube1 = createCube()
cube1.position.y =2
console.log(cube1.position.y)
const cube2 = createCube(0xffff00)
cube2.position.y = 2
cube2.position.x = 1
const cube3 = createCube(0xff00ff)
cube3.position.y = 2
cube3.position.x = -1
scene.add(cube1,cube2,cube3)
// const camera = new THREE.PerspectiveCamera(75,w/h,0.1,10)
camera.position.set(5,5,5)
camera.lookAt(0,0,0)
const renderer = new THREE.WebGL1Renderer()
renderer.setSize(w,h)
renderer.render(scene,camera)
document.body.append(renderer.domElement)

上面是将每个物体设置position.y = 1
我们可以把他们添加到一个组里

const group = new THREE.Group()
group.position.y =2
const cube1 = createCube()
console.log(cube1.position.y)
const cube2 = createCube(0xffff00)
cube2.position.x = 1
const cube3 = createCube(0xff00ff)
cube3.position.x = -1
group.add(cube1,cube2,cube3)
scene.add(group)

效果和上面一样，同理旋转、缩放和定位都可以

2、交互

可以通过鼠标的滑动改变视角，或者摄像头的位置
通过引入OrbitControls这个controls，挂载摄像头和canvas元素，添加交互
在requestAnimationFrame通过orbitControls.update和渲染器重新渲染刷新出新的内容

import * as THREE from 'three'//
import {OrbitControls
} from "three/examples/jsm/controls/OrbitControls"
//const w = window.innerWidth
const h = window.innerHeight
const scene = new THREE.Scene()
const axes = new THREE.AxesHelper(6)
scene.add(axes)function createCube(color = 0xff0000) {const geometry = new THREE.BoxGeometry(1, 1, 1)const material = new THREE.MeshNormalMaterial({color: color})return new THREE.Mesh(geometry, material)
}
//
const cube1 = createCube()
scene.add(cube1)
// const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 10)
camera.position.set(5, 5, 5)
camera.lookAt(0, 0, 0)
const renderer = new THREE.WebGL1Renderer()
renderer.setSize(w, h)
renderer.render(scene, camera)
//
const orbitControls = new OrbitControls(camera, renderer.domElement)
//document.body.append(renderer.domElement)function animation() {//orbitControls.update()renderer.render(scene, camera)//requestAnimationFrame(animation)
}
animation()

3、dat.gui

是一个可视化的用户修改属性的ui界面
使用时主要无法直接对变量使用，要对对象中的属性进行使用
下载npm i dat.gui
引入import * as dat from "dat.gui"
我们可以通过观察GUI中对add方法的重载可以看出可以传不同类型的值

常用的方法

const gui = new dat.GUI()
const contorls = {num:0,color:0xffffff,width:0,speed:1,status:false,functionName:() => {console.log(111)}
}
// 添加数值输入框
gui.add(contorls,'num')
// 添加颜色选择框
gui.addColor(contorls,'color')
// 添加范围选择器 0代表最小值，5是最大值，1是step步值
gui.add(contorls,'width',0,5,1)
// 添加下拉选择框
gui.add(contorls,'speed',[0,1,2])
gui.add(contorls,'speed',{'停止':0,'慢速':1,'快速':2})
// 添加勾选框
gui.add(contorls,'status')
// 绑定方法
gui.add(contorls,'functionName')

其他常用的内容

 // 更新视图保持视图展示的是最新的属性
gui.updateDisplay()
gui.add(....).name('修改成你想要的名字').onChange((val)=>{console.log(`变化的值${val}`)}).onFinishChange((val)=>{})

下面案例使用MeshBasicMaterial这种材质是因为这种材质不需要光就可以展示而且可以直接修改颜色

import * as THREE from 'three'
import {OrbitControls
} from "three/examples/jsm/controls/OrbitControls"
import * as dat from "dat.gui"
const gui = new dat.GUI()
const w = window.innerWidth
const h = window.innerHeight
const scene = new THREE.Scene()
const axes = new THREE.AxesHelper(6)
scene.add(axes)
const cubeControls = {color:0xff0000,wireframe:false,rotateSpeed:1,rotateRadius:0.5,showWireframe:() => {cubeControls.wireframe = truematerial.wireframe = true// 更新视图保持视图展示的是最新的属性gui.updateDisplay()}
}
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({color: cubeControls.color,wireframe:cubeControls.wireframe,
})
console.log(material)
const cube = new THREE.Mesh(geometry, material)
// 添加分类
const cubeFolder = gui.addFolder("立方体的属性")
// 展开这个分类
cubeFolder.open()
// 添加设置颜色 并且数值变化监听
cubeFolder.addColor(cubeControls,'color').name("立方体的颜色").onChange((color) => {cubeControls.color = color// material.color.set(cubeControls.color)// 如果要直接赋值的话要转化为THREE中的Color对象material.color = new THREE.Color(cubeControls.color)
})
cubeFolder.add(cubeControls,'showWireframe').name("展示线框")
// 两种设置下拉框的用法
// cubeFolder.add(cubeControls,'rotateSpeed',[0,1,2]).name("方块的旋转速度")
cubeFolder.add(cubeControls,'rotateSpeed',{'停止':0,'慢速':0.5,'普通':1,'快速':2}).name("方块的旋转速度")
// 可以直接修改THREE中的属性，如果不用自己写的属性的话可以直接修改，如果用自己的属性控制的话，会导致视图和数据不匹配
cubeFolder.add(material,'wireframe').name("是否展示线框")
cubeFolder.add(cube.position,'x',-5,5,0.5).name("立方体的x")
cubeFolder.add(cube.position,'y',-5,5,0.5).name("立方体的y")
cubeFolder.add(cube.position,'z',-5,5,0.5).name("立方体的z")
scene.add(cube)
// const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 10)
camera.position.set(5, 5, 5)
camera.lookAt(0, 0, 0)
const renderer = new THREE.WebGL1Renderer()
renderer.setSize(w, h)
renderer.render(scene, camera)
const orbitControls = new OrbitControls(camera, renderer.domElement)
document.body.append(renderer.domElement)
const clock = new THREE.Clock()
function animation() {let currentTime = clock.getElapsedTime()cube.position.x = Math.cos(Math.PI * currentTime * cubeControls.rotateSpeed) * cubeControls.rotateRadiuscube.position.y = Math.sin(Math.PI * currentTime * cubeControls.rotateSpeed) * cubeControls.rotateRadiusorbitControls.update()renderer.render(scene, camera)requestAnimationFrame(animation)
}
animation()

4、小车车案例

import * as THREE from 'three'
import Stat from "three/examples/jsm/libs/stats.module"
import {OrbitControls
} from "three/examples/jsm/controls/OrbitControls"
const w = window.innerWidth
const h = window.innerHeight
const axes = new THREE.AxesHelper(6, 6, 6)
const stat = new Stat()
const scene = new THREE.Scene()
scene.add(axes)
const material = new THREE.MeshNormalMaterial()const carGroup = new THREE.Group()
carGroup.rotation.z = -0.5 * Math.PI
const geometry = new THREE.BoxGeometry(2.5, 1.5, 0.5)
const carBody = new THREE.Mesh(geometry, material);
const carBody1 = new THREE.Mesh(new THREE.BoxGeometry(0.75, 0.75, 0.45), material);
carBody1.position.z = 0.45
carGroup.add(carBody, carBody1)
scene.add(carGroup)
const wheelGroup = new THREE.Group()function createWheel() {const wheel = new THREE.Mesh(new THREE.BoxGeometry(0.75, 0.15, 0.75), material)return wheel
}function createWheelGeometry() {const wheelGeometry = new THREE.Mesh(new THREE.BoxGeometry(0.15, 0.45, 0.15), material)return wheelGeometry
}function addWheelGeometry(wheel1Group) {let n = 20for (var i = 0; i < n; i++) {var wheelG = createWheelGeometry()wheelG.position.x = r * Math.cos(Math.PI * 2 * (i / n))wheelG.position.z = r * Math.sin(Math.PI * 2 * (i / n))wheel1Group.add(wheelG)}
}
const r = (0.75 + 0.15) / 2
const wheel1Group = new THREE.Group()
const wheel1 = createWheel()
wheel1Group.add(wheel1)
wheel1Group.position.set(0.95, 1, 0)
addWheelGeometry(wheel1Group)const wheel2Group = new THREE.Group()
const wheel2 = createWheel()
wheel2Group.add(wheel2)
wheel2Group.position.set(-0.95, 1, 0)
addWheelGeometry(wheel2Group)const wheel3Group = new THREE.Group()
const wheel3 = createWheel()
wheel3Group.add(wheel3)
wheel3Group.position.set(0.95, -1, 0)
addWheelGeometry(wheel3Group)const wheel4Group = new THREE.Group()
const wheel4 = createWheel()
wheel4Group.add(wheel4)
wheel4Group.position.set(-0.95, -1, 0)
addWheelGeometry(wheel4Group)wheelGroup.add(wheel1Group, wheel2Group, wheel3Group, wheel4Group)
carGroup.add(wheelGroup)const crame = new THREE.PerspectiveCamera(75, w / h, 0.1, 10);
crame.position.set(5,0, 5)
crame.lookAt(0, 0, 0)
const renderer = new THREE.WebGL1Renderer()
renderer.setSize(w, h)
renderer.render(scene, crame)
const orbitControls = new OrbitControls(crame, renderer.domElement)
document.body.append(renderer.domElement)
document.body.append(stat.domElement)
const Clock = new THREE.Clock()function canvasHZ() {let currentTime = Clock.getElapsedTime()carGroup.position.y = currentTime  %  10 - 5wheelGroupRotation(wheel1Group, currentTime)wheelGroupRotation(wheel2Group, currentTime)wheelGroupRotation(wheel3Group, currentTime)wheelGroupRotation(wheel4Group, currentTime)stat.update()orbitControls.update()renderer.render(scene, crame)window.requestAnimationFrame(canvasHZ)
}
canvasHZ()function wheelGroupRotation(wheelGroup, time) {wheelGroup.rotation.y = -time
}

three.js学习(二)相关推荐

three.js学习二
物体: 物体由两部分组成,材质和形状形状: 物体的形状,球体,正方体,线条,粒子等直线线条: var material = new THREE.LineBasicMaterial({//这是线段材 ...
网页3D效果库Three.js学习[二]-了解照相机
camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...
Three.js学习二——Three.js极简入门
目录准备开发环境掌握一些概念性知识编码测试创建一个场景(Creating a scene) 创建一个场景渲染场景使立方体动起来结果准备开发环境 1.一台可用浏览器的带文件系统的电脑: ...
JS高级的学习(二)
JS高级的学习(二) set对象 Set 是一个对象存放数据数据永远不会重复 Set 当成是一个数组遍历使用数组方法 find findIndex Map 数组转成 Set对象 const ...
node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染文章目录 node.js 学习笔记(二)模板引擎和C/S渲染一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Lodash.js学习（二）——difference深度理解
前言前面初始了lodash,涉及到的几个方法也比较简单,因此没有进行具体的讲解,这篇文章将对difference.differenceBy,differenceWith进行深度的讲解 _.diffe ...

three.js学习(二)

1、组

2、交互

3、dat.gui

4、小车车案例

three.js学习(二)相关推荐

最新文章

热门文章