Three.js 入门1 零基础快速上手（示例）

最新推荐文章于 2025-03-07 09:16:45 发布

rainning_z

最新推荐文章于 2025-03-07 09:16:45 发布

阅读量546

点赞数

分类专栏： Three.js 文章标签： three.js webGL 入门

本文链接：https://blog.youkuaiyun.com/ruiti/article/details/90044419

版权

Three.js 专栏收录该内容

4 篇文章

订阅专栏

学习three.js过程中的事例记录下来，方便后期复习

学习资料来源：http://www.hewebgl.com/

示例1.

初步了解简单API

场景（scene）、相机（camera）和渲染器（renderer）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head>
<body>

</body>
<script>
    /*创建场景*/
    var scene = new THREE.Scene()
    /*打印场景位置*/
    console.log(scene.position)
    /*创建相机*/
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10)
    /*打印相机位置*/
    console.log(camera.position)
    /*创建渲染器*/
    var renderer = new THREE.WebGLRenderer();
    /*设置渲染器尺寸*/
    renderer.setSize(window.innerWidth, window.innerHeight)
    /*设置渲染器清除颜色*/
    renderer.setClearColor('#FFFFFF')
    /*将渲染器添加到body中*/
    document.body.appendChild(renderer.domElement);
    /*生成几何体 盒子模型（*/
    var geometry = new THREE.CubeGeometry(2, 2, 2);
    /*生成材质*/
    //var material = new THREE.MeshBasicMaterial({color: 0xff0000})//基础网孔材料
    var material = new THREE.MeshNormalMaterial()//法向量网孔材料
    /*几何体和材质结合*/
    var cube = new THREE.Mesh(geometry, material)
    //*将结合体添加到场景*/
    scene.add(cube)
    /*对象将被添加到原点处，即坐标点(0,0,0)，这将导致相机和立方体发生空间重叠。为了避免这样，我们把相机（camera）的位置移出来一些*/
    camera.position.z = 5
    /*打印相机位置*/
    console.log(camera.position)
    function render() {
        /*启动定时器*/
        requestAnimationFrame(render);
        /*结合体旋转*/
        cube.rotation.y += 0.01;
        cube.rotation.x += 0.01;
        /*渲染*/
        renderer.render(scene, camera)
    }

    render()


</script>
</html>

效果图：