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)
相关推荐
weixin_472339465 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击6 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue7 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762908 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk9 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼10 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客10 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
Liudef0610 小时前
2048小游戏实现
javascript·css·css3