three.js 光源辅助观察器

最新推荐文章于 2024-03-05 10:20:07 发布

步萌ཽ

最新推荐文章于 2024-03-05 10:20:07 发布

阅读量92

点赞数

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

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

版权

three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="importmap">
        {
            "imports": {
                "three": "./js/three.module.js",
                "three/addons/": "./js/"
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from './js/OrbitControls.js';
        import  Stats  from './js/stats.module.js';
        // 浏览器控制台测试，是否引入成功
        console.log(THREE.Scene);
        console.log(OrbitControls);
        console.log(Stats);

        let width =window.innerWidth
        let height =window.innerHeight

        // 场景 摄像机 渲染器
        let scene=new THREE.Scene();
        let camera=new THREE.PerspectiveCamera(45,width/height,0.1,1000)
            camera.position.x=50
            camera.position.y=50
            camera.position.z=50
            camera.lookAt(scene.position)
        let renderer=new THREE.WebGLRenderer({antialias:true})
            renderer.setSize(width,height)
            document.body.appendChild(renderer.domElement)
        
        // 相机控件
        let controls=new OrbitControls(camera,renderer.domElement)
            controls.addEventListener('change',function(){
                renderer.render(scene,camera)
            })

        // 光源
        //  // 点光源
        let pointLight=new THREE.PointLight(0xffffff,1.0)
        pointLight.position.set(40,60,-30)
        // scene.add(pointLight)
        //  //  //点光源辅助器
        let pointLightHelper=new THREE.PointLightHelper(pointLight,10)
        scene.add(pointLightHelper)

        //  // 环境光
        let ambientLight=new THREE.AmbientLight(0xffffff,0.4)
        scene.add(ambientLight)

        //  //平行光
        let directionalLight=new THREE.DirectionalLight(0xffffff,1.0)
        directionalLight.position.set(0,0,20)
        scene.add(directionalLight)
        //   //  //平行光辅助器
        let directionalLightHelper=new THREE.DirectionalLightHelper(directionalLight,5,0xff0000) 
        scene.add(directionalLightHelper)
        

        
        // 物品
        let boxGeometry=new THREE.BoxGeometry(10,15,20)
        // let boxMaterial = new THREE.MeshBasicMaterial({color:0x00ff00})
        let boxMaterial = new THREE.MeshLambertMaterial({color:0x0000ff})
        let box=new THREE.Mesh(boxGeometry,boxMaterial)
        box.position.x=20
        box.position.y=20
        box.position.z=20
        scene.add(box)




        renderer.render(scene,camera)
        

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