Three.js基础练习——渲染一个立方体

1.学习内容参考了

three.js入门教程--零基础也能学会_threejs菜鸟教程-CSDN博客

本章内容包含渲染立方体,并配合ui工具食用~

2.效果图

javascript 复制代码
import * as THREE from 'three'
import * as dat from 'dat.gui'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
// const controls = new OrbitControls(camera, renderer.domElement)
// const loader = new GLTFLoader()
// 创建一个场景
const scene = new THREE.Scene()
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubMaterial)
scene.add(cube)
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
)
camera.position.z = 5
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器大小 为页面宽高 或一半
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(window.devicePixelRatio)
document.body.appendChild(renderer.domElement)
renderer.render(scene, camera)
//初始化集成GUI
const gui = new dat.GUI()
// 第一个参数 对象
// 第二个参数 对象属性
// 第三个参数 步长范围
const guiPosition = gui.addFolder('位置信息')
guiPosition.add(cube.position, 'x', -10, 10, 1)
guiPosition.add(cube.position, 'y', -10, 10, 1)
guiPosition.add(cube.position, 'z', -10, 10, 1)

const guiScale = gui.addFolder('缩放')
guiScale.add(cube.scale, 'x', 1, 10, 1)
guiScale.add(cube.scale, 'y', 1, 10, 1)
guiScale.add(cube.scale, 'z', 1, 10, 1)
// 创建轨道控制器
const controls =new OrbitControls(camera,renderer.domElement)
function animation() {
    // cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    cube.rotation.z += 0.01
    renderer.render(scene, camera)
    requestAnimationFrame(animation)
}
animation()
document.body.appendChild(renderer.domElement)
// 4.创建坐标辅助器
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)
// 5.创建自适应画布
window.addEventListener('resize', () => {
    // 重新设置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    // 设置渲染器出图 照片大小
    renderer.setSize(window.innerWidth,window.innerHeight)
})
// 6.创建网格辅助对象
const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)
// 7.对正方体进行基础设置
// 设置移动位置
cube.position.x = 10
cube.position.y = 10
cube.position.z = 10
// 大小 x y z放大倍数
cube.scale.set(2, 2, 3)
相关推荐
lingchen190635 分钟前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152871 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go1 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠1 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
翻滚丷大头鱼2 小时前
Java 集合Collection—List
java·开发语言
aramae2 小时前
C++ -- 模板
开发语言·c++·笔记·其他
胡耀超2 小时前
4、Python面向对象编程与模块化设计
开发语言·python·ai·大模型·conda·anaconda
猫头虎-前端技术2 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
一只小风华~2 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
索迪迈科技3 小时前
java后端工程师进修ing(研一版 || day40)
java·开发语言·学习·算法