【ThreeJS Basics 1-3】Hello ThreeJS,实现第一个场景

文章目录


环境

我的环境是 node version 22


创建一个项目

首先,新建一个空的文件夹,然后 npm init -y , 此时会快速生成好默认的 package.json

安装依赖

在新建的项目下用 npm 安装依赖

  • npm install vite
  • npm install three

基础 Web 页面

在项目下新建 index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Three.js Project</title>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script type="module" src="./script.js"></script>
</body>
</html>

概念解释

想要使用 ThreeJS 实现一些场景,以下的对象是必要的

  • A scene that will contain objects
  • Some objects
  • A camera
  • A renderer

大概的思路是

  1. 新建场景
  2. 新建一个立方体,把他加入场景
  3. 新建一个照相机,加入场景
  4. 创建渲染器,配置渲染尺寸,说明渲染那个场景,以及用那个摄像头渲染

以下就是在脚本中如何定义并使用这四种对象

编写代码

新建 script.js

js 复制代码
import * as THREE from 'three'

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Object
 */
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

/**
 * Sizes
 */
const sizes = {
    width: 800,
    height: 600
}

/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

运行项目

通过 npm run dev 跑起来看一看

也许你会觉得它并不像个空间上的物体,这是因为,我们的照相机跟物体是水平的

所有的元素,添加到场景时候,位置坐标都是 ( 0,0,0 )

我们修改一下材质 wireframe

js 复制代码
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })

你就会得到如下的画面

相关推荐
好好研究1 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
伍哥的传说5 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian5 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao6 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0016 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员6 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉6 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
草履虫建模7 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
阿丽塔~8 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
zhuà!10 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro