threejs基本使用方法

1、基本使用案例
使用threejs,必须保证电脑有显卡,要不极大可能画面加载不出,而且报错。

import * as THREE from "three";
//有些功能需要单独引入,如下:
//1、轨道控制器,可以使得相机围绕目标进行轨道运动。
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
//2、第一人称控制器
import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js';
//3、用于载入glTF 2.0资源的加载器。
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
//threejs初始化
this.container = document.getElementById("container");

init:function(){
	//创建场景
	this.scene = new THREE.Scene()
    this.scene.background = new THREE.Color(0xFFFFFF)//设置场景颜色
    //添加世界坐标,辅助开发
    this.scene.add(new THREE.AxesHelper(100))
    //创建灯光
    this.scene.add(this.ambLigthFun())
    this.scene.add(this.dirLigthFun())
	//创建相机
    this.camera =this.cameraFun()
    //添加模型
    this.scene.add(this.createMesh())
    //创建渲染器对象
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setPixelRatio( window.devicePixelRatio );
    this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
    this.container.appendChild(this.renderer.domElement);
    //创建控件对象
    this.controls =this.controlsFun()
    //执行threejs的动画效果,也可以使用requestAnimationFrame()。使用requestAnimationFrame()可以让动画更流畅,大约每16.7ms调用一次,电脑性能不好就会越来越卡顿。所以对于性能不好的电脑,还是建议使用setInterval(),渲染次数也不要太过频繁。
	this.timer =setInterval(()=>{
		this.renderFun()
	},5000)
	window.addEventListener( 'resize', this.onDomResize );
}
//创建环境光
ambLigthFun:function(){
	let light = new THREE.AmbientLight(0xffffff,0.8)
 	return light
},
//创建平行光
dirLigthFun:function(){
	let light = new THREE.DirectionalLight(0xffffff,0.3)
	light.position.set(100,100,100)
	return light
},
//创建相机
cameraFun:function(){
	let camera = new THREE.PerspectiveCamera(75,this.container.clientWidth / this.container.clientHeight,0.1,1000)
    camera.position.x =0
    camera.position.z =0
    camera.position.y =280
    return camera
},
//创建控件对象
controlsFun:function(){
	let controls = new OrbitControls(this.camera, this.renderer.domElement);
	controls.addEventListener('change',this.renderFun)
	controls.minDiatance = 1
	controls.maxDistance =700
	controls.minPolarAngle =0
	controls.maxPolarAngle =Math.PI/2
	controls.update()
	return controls
},
//执行渲染操作
renderFun: function() {
	this.renderer.render(this.scene, this.camera);
},
//适配窗口大小
onDomResize(){
	if(this.camera){
		this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
		this.camera.updateProjectionMatrix();
	}
	this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
},
createMesh: function(){
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    return mesh
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值