自定义物体

最新推荐文章于 2023-04-07 22:03:17 发布

一个躺平的小趴菜

最新推荐文章于 2023-04-07 22:03:17 发布

阅读量41

点赞数

分类专栏： three.js 文章标签： huffman tree

本文链接：https://blog.csdn.net/qq_38389828/article/details/127744671

版权

three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自定义物体

import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
window.onload = (() => {
    let number = 0.01;
    const scene = new THREE.Scene();//创建场景

    const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);// 创建相机

    camera.position.set(0, 0, 5);//设置相机位置

    const boxView = new THREE.BoxGeometry(1, 1, 1);//创建一个正方体
    const mesh = new THREE.MeshBasicMaterial({ color: '#fff000' });//创建一个素材
    const planeView = new THREE.PlaneGeometry(20, 60);
    const planeMesh = new THREE.ShadowMaterial();
    planeMesh.opacity = 0.2;
    const cubePlane = new THREE.Mesh(planeView, planeMesh);
    //自己创建物体
    const geometry = new THREE.BufferGeometry();
    const geometry1 = new THREE.BufferGeometry();
    //
    const vertices = new Float32Array([
        1.0,3.0,0,
        1.0,1.0,0,
        3.0,1.0,0
    ]);
    const vertices1 = new Float32Array([
        1.0,3.0,0,
        3.0,3.0,0,
        3.0,1.0,0
    ]);
    geometry1.setAttribute('position', new THREE.BufferAttribute(vertices1, 3))
    const cube1 = new THREE.Mesh(geometry1, mesh);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
    const cube = new THREE.Mesh(geometry, mesh);
    // scene.add(cubePlane);
    scene.add(cube);
    scene.add(cube1)
    scene.add(camera);
    const renderer = new THREE.WebGL1Renderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);
    //添加坐标轴
    scene.add(new THREE.AxesHelper(5))
    document.body.appendChild(renderer.domElement);
    //创建轨道控制器  
    const orbit = new OrbitControls(camera, renderer.domElement);
    //设置控制器阻尼
    orbit.enableDamping = true;//类似惯性
    render();
    function render() {
        orbit.update();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }


    //适应屏幕
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();//更新矩阵
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);//更新设备的像素比例（移动端会有区别）
    })
    //双击全屏
    window.addEventListener('dblclick', () => {
        if (!document.fullscreenElement) {
            renderer.domElement.requestFullscreen();//请求全屏
        } else {
            document.exitFullscreen();
        }

    })

})()
()