THREEJS-001 四大组件

最新推荐文章于 2024-05-30 17:57:45 发布

日积-月累

最新推荐文章于 2024-05-30 17:57:45 发布

阅读量172

点赞数

分类专栏： THREE.JS

本文链接：https://blog.csdn.net/u010697780/article/details/103878040

版权

THREE.JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

THREEJS-001 四大组件

场景

//定义一个场景
let scene = new THREE.Scene();

相机

	//定义一个相机
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

a、正投影相机（远近一样）
b、透视相机（远小近大）

渲染器

//定义一个渲染器
let renderer = new THREE.WebGLRenderer();
//设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
//设置清除色（渲染前清除屏幕的颜色）
renderer.setClearColor("#ffffff")

网格模型

//定义一个几何体 2X2X2
let geometry = new THREE.CubeGeometry(2, 2, 2);
//设置几何体的颜色
let material = new THREE.MeshBasicMaterial({color: 0xff0000})
//创建这个网格模型
let cube = new THREE.Mesh(geometry, material);

整体Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/three.js"></script>
</head>
<body>

</body>
<script>
//定义一个场景
let scene = new THREE.Scene();
//定义一个相机
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
//定义一个渲染器
let renderer = new THREE.WebGLRenderer();
//设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
//设置清除色（渲染前清除屏幕的颜色）
renderer.setClearColor("#ffffff")
//将选软器渲染内容添加到dom
document.body.appendChild(renderer.domElement);
//定义一个几何体 2X2X2
let geometry = new THREE.CubeGeometry(2, 2, 2);
//设置几何体的颜色
let material = new THREE.MeshBasicMaterial({color: 0xff0000})
//创建这个网格模型
let cube = new THREE.Mesh(geometry, material);
//将网格模型添加到场景里面
scene.add(cube)
//设置相机位置
camera.position.z = 5
//进行渲染
function render() {
    //空闲即调用渲染
    requestAnimationFrame(render)
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    cube.rotation.z += 0.01
    renderer.render(scene, camera)
}
render()
</script>
</html>

日积-月累

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
THREEJS-001 四大组件

THREEJS-001 四大组件场景//定义一个场景let scene = new THREE.Scene();相机 //定义一个相机let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);a、正投影相机（远近一样）b、透视相机（远小近大）渲染器...
复制链接

扫一扫