three.js创建一个简单立方体

步萌ཽ

已于 2023-07-17 22:05:04 修改

阅读量91

点赞数

分类专栏： three.js 文章标签： javascript 开发语言 ecmascript

于 2023-06-18 21:34:20 首次发布

本文链接：https://blog.csdn.net/m0_66288119/article/details/131276443

版权

three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.151.3/three.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    
    <script>
        // 场景
        var scene=new THREE.Scene();
        scene.background = new THREE.Color("#88B9DD");
        // 摄像机
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)
        camera.position.x=-20
        camera.position.y=30
        camera.position.z=20
        camera.lookAt(scene.position)
        // 画布
        var renderer=new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth,window.innerHeight)
        document.body.appendChild(renderer.domElement)
        
        // 物体创建
        var geometry=new THREE.BoxGeometry(6,6,6)
                    // 基本材质  MeshBasicMaterial不感光材料
                // var material=new THREE.MeshBasicMaterial({color:0x00ff00})
                    // 感光材料
        var material=new THREE.MeshLambertMaterial({color:0x00ff00})
        var cube=new THREE.Mesh(geometry, material)
        scene.add(cube)

                // 坐标轴
                var axes=new THREE.AxesHelper(20)
                scene.add(axes)

                // 地面
                var planeGeometry=new THREE.PlaneGeometry(60,20,1,1)
                var planeMaterial=new THREE.MeshLambertMaterial({color:0xcccccc})
                var plane=new THREE.Mesh(planeGeometry, planeMaterial)
                plane.rotation.x=-0.5*Math.PI
                plane.position.x=15
                plane.position.y=-6
                plane.position.z=0
                scene.add(plane)

                // 光源设置
                var spotLight=new THREE.SpotLight(0xffffff)
                spotLight.position.set(-40,40,10)
                scene.add(spotLight)

                // // 阴影设置
                renderer.setClearColor(new THREE.Color(0x000000,1.0))
                renderer.shadowMap.enabled=true
                cube.castShadow=true
                plane.receiveShadow=true
                spotLight.castShadow=true

                // 状态监视器
                // var stats=new Stats()
                // stats.showPanel(0)
                // document.body.appendChild(stats.dom)

        // 静态渲染
        // renderer.render(scene, camera)

        // 动画渲染
        function animate(){
            cube.rotation.x +=0.01
            cube.rotation.y +=0.01
            renderer.render(scene, camera)
            requestAnimationFrame(animate)
        }
        animate()
    </script>
</body>
</html>