|
先看看效果
引入threeJS
//手势控制器
//模型加载器，还有其他类型如：OBJ,自行更换模型加载器
不建议使用模块得方式导入threeJS，会导致未知得问题
承载模型标签设置宽高
.three {
width: 100vw;
height: 100vh;}
//我这里设置的是全屏
threeJS JS部分
如果使用vue的话先简化下赋值
const THREE = window.THREE;
init() {
var that = this;
//场景
var scene = new THREE.Scene();
//相机视角
var camera = new THREE.PerspectiveCamera(
30,
this.$refs.three.clientWidth / this.$refs.three.clientHeight,
0.1,
2000
);
//渲染器
var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
that.renderer=renderer;renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(this.$refs.three.clientWidth, this.$refs.three.clientHeight);
//设置背景为透明，这样就可以自己加背景图片了
renderer.setClearAlpha(0);this.$refs.three.appendChild(renderer.domElement);
//材质
let sphereGeometry = new THREE.SphereGeometry(30, 50, 50);
let meshMaterial = new THREE.MeshPhongMaterial({
color:0x0000ff,
specular:0x4488ee,
shininess:12});
meshMaterial.shininess = 100;
let sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
sphere.castShadow = true;scene.add(sphere);
//光源
var ambientLight = new THREE.AmbientLight(0xffffff,1.5);
scene.add(ambientLight);
// 平行光
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(80, 100, 50);
scene.add(directionalLight);
//手势控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.enablePan = false;
controls.maxDistance = 2;
controls.minDistance = 0.5;
controls.update();
//加载模型
var loader = new THREE.FBXLoader();
loader.load(
//模型的 |