三维场景基本要素和demo-01-优快云博客

本文介绍Three.js的基础使用方法，包括核心要素：场景、相机、渲染器及渲染过程。通过一个立方体模型的示例，详细讲解了如何创建场景、设置模型材质、添加光源和相机，最终实现场景的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

下载three.js: three.js官网

扩展库：three.js-master\three.js-master\examples\js

核心库：three.js-master\three.js-master\build

1.基本要素

场景（Scene）：模型、灯光等

相机(Camera)：观察场景的视角

渲染器(Renderer)：场景渲染输出的目标

渲染(render):执行渲染操作

2.demo

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs--demo001</title>
    <script src="../js/three.js"></script>
</head>
<body>
    <script>
        //第一步创建场景元素
        var scene=new THREE.Scene();

        //第二步创建一个网格模型对象  网格对象方法function Mesh( geometry, material )
        //需要两个参数geometry几何模型  material材质
        var geometry=new THREE.BoxGeometry(100,100,100);//立方体模型
        var material=new THREE.MeshLambertMaterial({color:0xff0000});
        var mesh=new THREE.Mesh(geometry,material);
        scene.add(mesh);//添加网格到场景中
        //添加灯光  点光源
        var light=new THREE.PointLight(0xff0000);
        light.position.set(300,400,200);//光源的位置
        scene.add(light);//将光源加入到场景中

        //添加相机  透视相机
        var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);
        camera.position.set(200,200,200);//相机的位置
        camera.lookAt(scene.position);//相机朝向的位置

        //添加渲染器
        var renderer=new THREE.WebGLRenderer();
        renderer.setSize(800,600);
        //将渲染器加到文档中
        document.body.appendChild(renderer.domElement);

        //渲染  渲染需要传入两个参数 一个是场景对象 一个是相机

        renderer.render(scene,camera);


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

效果