three.js在vue中创建立方体

需安装npm install --save three

npm install --save three

创建立方体简单步骤

1.创建场景
2.创建相机
3.创渲染器
4.创建一个立方体
5.创建一个材质
6.创建网格
7.渲染大小
8.渲染到页面
9.渲染函数，请求动画帧，不停的渲染
  

<template>

    <div>

        <div class="min" id="min">

         </div>

    </div>

</template>

<script lang="ts" setup>

import { onMounted } from 'vue'

// 导入threejs

import * as THREE from 'three';

//导入轨道控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// 导入lil.gui

import { GUI  } from "three/examples/jsm/libs/lil-gui.module.min.js";

//创建场景

const scene = new THREE.Scene();

//创建相机

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //视角、屏幕宽/高比、近平面、远平面

//创渲染器

const renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight ); //渲染大小

//document.body.appendChild( renderer.domElement ); //渲染到页面

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); //创建一个立方体

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); //创建一个材质



const cube = new THREE.Mesh( geometry, material ); //创建网格



//设置元素材质为线框模式

material.wireframe = true



//cube.position.set(3,0,0)

cube.scale.set(2,2,2) //局部缩放



//欧拉角旋转

cube.rotation.x=Math.PI / 4 //旋转45度

// cube.rotation.y=Math.PI / 4 //旋转45度

// cube.rotation.z=Math.PI / 4 //旋转45度



scene.add( cube ); //将网格添加到场景中



camera.position.z = 5; //设置机机的位置，正对为是Z

camera.position.y = 2

camera.position.x = 2

camera.lookAt(0,0,0) //看到那里，默认是看到远点，可以不设置

///renderer.render( scene, camera );  //渲染出来、主是就是调用render函数,但只能得到一个平面



//添加事件坐标线

const axesHelper = new THREE.AxesHelper( 5 );

scene.add( axesHelper );



//new 控制器，renderer.domElement是canvas的事件 可以传document.body

const controls = new OrbitControls(camera,renderer.domElement)

controls.enableDamping=true //设置单阻尼的惯性

controls.dampingFactor =0.05 //设置阻尼系数

controls.rotateSpeed=0.05 //设置旋转速度

controls.autoRotate=true

controls.update() //更新事件



//渲染函数

function animate() { //

    requestAnimationFrame( animate ); //请求动画帧，不停的渲染

    cube.rotation.x += 0.01; //对立方体进行旋转，才能看到效果

    cube.rotation.y += 0.01;//对立方体进行旋转，才能看到效果

    renderer.render( scene, camera ); //场景，相机

}

animate();



//监听窗口的变化

window.addEventListener('resize',()=>{

    //重置渲染器宽高比

    renderer.setSize(window.innerWidth,window.innerHeight)

    // 重置相机宽高比

    camera.aspect=window.innerWidth/window.innerHeight

    //更新相机投影矩陈

    camera.updateProjectionMatrix()

})




let eventObj={

    Fullscreen:function(){

        document.body.requestFullscreen()

    },

    ExitFullscreen:function(){

        document.exitFullscreen()

    }

}

const gui=new GUI()

//添加按钮

gui.add(eventObj,'Fullscreen').name('全屏')

gui.add(eventObj,'ExitFullscreen').name('退出全屏')

//控制位置

// gui.add(cube.position,'x',-5,5).name('立方体的X轴位置')

// gui.add(cube.position,'y').min(-10).max(10).step(1).name('立方体的Y轴位置')

// gui.add(cube.position,'z').min(-10).max(10).step(1).name('立方体的z轴位置')

const foled=gui.addFolder('立方体的位置') //设置分组

foled.add(cube.position,'x',-5,5).name('立方体的X轴位置').onChange((val)=>{

    console.log('立方体',val)

})

foled.add(cube.position,'y').min(-10).max(10).step(1).name('立方体的Y轴位置').onFinishChange((val)=>{

    console.log(val,'============444========')

})

foled.add(cube.position,'z').min(-10).max(10).step(1).name('立方体的z轴位置')



gui.add(material,'wireframe').name('立方体元素模式')



// 设置材质颜色

let colorParams={

    cubeColor:'#ff0000'

}



gui.addColor(colorParams,'cubeColor').name('立方体颜色').onChange((val)=>{

    console.log(val)

    cube.material.color.set(val)

})





onMounted(()=>{

    const dom=document.getElementById('min')

    dom.appendChild( renderer.domElement ); //插入页面

})



</script>

<style scoped>

.min{

    position: relative;

    width: 100%;

    height:100%;

}

canvas{

    display: flex;

    position:absolute;

    width:800px;

    height:800px;

    top:0;

    left:0;

    bottom:0;

    bottom:0;

    z-index:899;

}

</style>