为了快速入门threejs，学学threejs三大组件。

最新推荐文章于 2025-07-28 09:22:35 发布

极彩视觉科技

最新推荐文章于 2025-07-28 09:22:35 发布

阅读量531

点赞数

CC 4.0 BY-SA版权

分类专栏： threejs基础

本文链接：https://blog.youkuaiyun.com/qq_29335275/article/details/85061250

threejs基础专栏收录该内容

10 篇文章

订阅专栏

本文介绍Three.js的三个核心组件：场景、相机和渲染器。通过创建一个包含立方体、球体和地面的简单场景，展示了如何使用Three.js进行3D图形渲染。文章详细解释了每个组件的作用及如何在WebGL渲染器中设置它们。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>threejs三大组件</title>
       <script src="../js/three.js"></script>
   </head>
   <body>
   

   


   <canvas id="cc"></canvas>



<script type="text/javascript">

// 创建一个场景，它将保存我们所有的元素，如物体、照相机和灯光。
var scene = new THREE.Scene();

// 创建一个摄像机，它定义了我们所处的位置.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染并设置大小指定渲染canvas对象
var renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#cc")});

renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);

//创建一个xyz坐标轴，方便初学者理解三维坐标
var axes = new THREE.AxisHelper( 20 );
scene.add(axes);

// 创建地面
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);

// 地面默认是垂直的。所以需要旋转一下地面。
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0

// 地面添加到场景里面去
scene.add(plane);

// 创建一个立方体
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 设置立方体坐标位置
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;

// 立方体放入场景
scene.add(cube);


       // 创建一个球体
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

//设置球体坐标位置
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;

// 球体放入场景
scene.add(sphere);

//设置相机位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);

// 执行一次渲染器，GPU渲染成图像，绘制到canvas里面呈现
renderer.render(scene, camera);

</script>
</body>
</html>