第一步 安装依赖
npm install --save three
在需要使用的组件进行引用
//引入
import * as THREE from 'three'; //
//引入gltf格式的模型文件需要的
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
//监听鼠标键盘事件时需要用到
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
算了直接上完整代码 ps:引用的模型文件要放在public文件夹下面
<template>
<div class="main">
<header> <h1>THREEJSDEMO</h1> </header>
<div id="scene" class="body"></div>
</div>
</template>
<script>
var elementResizeDetectorMaker = require("element-resize-detector")
import * as THREE from 'three';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {
data(){
return{
dom:null,
scene:null,
mesh: null, //网格模型对象
point: null,
camera: null, //相机对象
renderer: null, //渲染器对象
loader:null,
controls:null,
}
},
created(){
},
mounted(){
this.dom=document.getElementById('scene');
this.loader=new GLTFLoader();
elementResizeDetectorMaker().listenTo(this.dom, () => {
this.$nextTick(() => {
this.renderer.setSize(this.dom.clientWidth, this.dom.clientHeight);
})
})
this.init();
this.addcar();
this.addPlane();
},
methods:{
init(){
// 创建场景
this.scene=new THREE.Scene();
//环境光
var ambient = new THREE.AmbientLight(0x999999);
this.scene.add(ambient);
this.point = new THREE.PointLight(0x999999);
//点光源位置
this.point.position.set(0, 2000, 400);
//点光源添加到场景中
// this.scene.add(this.point);
// var spotLight = new THREE.SpotLight(0x444444);
// spotLight.position.set(0, 1000, 400);
// spotLight.castShadow = true;
// spotLight.shadow.mapSize.set(3000, 3000);
// // this.scene.add(spotLight);
var spotLight = new THREE.SpotLight(0x444444);
// 设置聚光光源位置
spotLight.position.set(0,500, 50);
spotLight.intensity = 5; //修改光的强度
spotLight.distance = 50000; //修改光的照射范围
spotLight.angle = Math.PI/3; //修改光的照射弧度
spotLight.penumbra = 1.0; //修改交界过渡
spotLight.decay = 1.0; //修改衰减度
this.scene.add(spotLight);//光对象添加到scene场景中
// 相机设置
var width = this.dom.clientWidth; //窗口宽度
var height = this.dom.clientHeight; //窗口高度
var k = width / height; //窗口宽高比
// var s = 500; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
this.camera = new THREE.PerspectiveCamera(60, k, 1, 4000);
this.camera.position.set(0, 500, 400); //设置相机位置
//this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
this.camera.lookAt({ x: 0, y: 0, z: 0 }); //设置相机方向(指向的场景对象)
//创建渲染器对象
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(width, height); //设置渲染区域尺寸
this.renderer.setClearColor(0x000000, 1); //设置背景颜色
this.renderer.shadowMap.enabled = true;
this.dom.appendChild(this.renderer.domElement); //body元素中插入canvas对象
//创建控件对象
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.addEventListener('change', this.render());//监听鼠标、键盘事件
this.render();
},
render(){
//执行渲染操作 指定场景、相机作为参数
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(() => { this.render() })
},
//添加平面
addPlane() {
var planeGeometry = new THREE.PlaneGeometry(4000, 4000, 1, 1);
var texture = THREE.ImageUtils.loadTexture("static/3Dmodel/bg.jpg"); //加载纹理贴图
var material = new THREE.MeshBasicMaterial({ //贴图通过材质添加给几何体
map: texture, //给纹理属性map赋值
side: 2, //两面可见
shininess: 30,//高光部分的亮度,默认30
}); //材质对象
var mesh = new THREE.Mesh(planeGeometry, material); //纹理贴图网格模型对象
mesh.position.set(0,10 , 0)
mesh.rotation.x = THREE.MathUtils.degToRad(270)
// var planeMaterial = new THREE.MeshLambertMaterial({ color: 0x999999 });
// var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// plane.rotation.x = -0.5 * Math.PI;
// plane.position.x = 15
// plane.position.y = 0
// plane.position.z = 0
// // 设置投影
// plane.receiveShadow = true;
this.scene.add(mesh)
},
addcar(){
this.loader.load("static/3Dmodel/free__dodge_challenger_srt/scene.gltf",(gltf)=>{
gltf.scene.scale.set(100,100,100);
gltf.scene.rotation.set(0,0,0);
gltf.scene.position.set(10,10,50)
// gltf.scene.castShadow=true;
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
// console.log(child,999)
child.frustumCulled = false;
//模型阴影
child.castShadow = true;
//模型自发光
// child.material.emissive = child.material.color;
// child.material.emissiveMap = child.material.map ;
}})
this.scene.add(gltf.scene);
})
},
},
}
</script>
<style lang='scss' scoped>
.main{
width: 100%;
height: 100%;
position: relative;
header{ position: absolute;top:0;z-index: 5;width:100%;
h1{
text-align: center;
// color: ;
}
}
#scene{
height: 100%;
width: 100%;
}
}
</style>
这个demo还是有点问题 我不知道为啥会出现,就是一直拉远一直拉远 就会变空白了 转变方向的时候也会出先问题。(解决了记得回来评论问题及办法)