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)
相关推荐
Mintopia5 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
Code季风7 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
Mintopia8 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
Jacob023415 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
qianbo_insist16 分钟前
c++ python 共享内存
开发语言·c++·python
今天背单词了吗98030 分钟前
算法学习笔记:8.Bellman-Ford 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·后端·算法·最短路径问题
CoderPractice37 分钟前
C#控制台小项目-飞行棋
开发语言·c#·小游戏·飞行棋
晴殇i41 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Coding小公仔44 分钟前
LeetCode 151. 反转字符串中的单词
开发语言·c++·算法