<template>
</template>
<script>
import * as THREE from 'three';
import * as dat from 'dat.gui';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import pic from '../assets/diffuse.jpg';
//创建场景
const scene = new THREE.Scene();
//创建元素
const geometry = new THREE.SphereGeometry(50);
//三维样条曲线
const arr = [
new THREE.Vector3(-50, 20, 90),
new THREE.Vector3(-10, 40, 40),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(60, -60, 0),
new THREE.Vector3(70, 0, 80)
];
//使用CatmullRomCurve3形成一条三维样条曲线(画一条线)
const curue=new THREE.CatmullRomCurve3(arr);
//根据上面生成的曲线生成管道
const geometry1=new THREE.TubeGeometry(curue, 200, 5, 60);
//实例化一个TextureLoader用来引入纹理贴图
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load(pic);//纹理贴图
texture.wrapS = THREE.RepeatWrapping;//UV坐标U方向阵列模式
texture.repeat.x = 10;//纹理沿着管道方向阵列(UV坐标U方向)
const material1 = new THREE.MeshLambertMaterial({
map:texture,
side: THREE.DoubleSide, //双面显示看到管道内壁
});
// 线模型
const line = new THREE.Mesh(geometry1, material1);
const pointsArr=curue.getSpacedPoints(500);
scene.add(line);
//网格模型
// const mesh = new THREE.Mesh(geometry, material);
// mesh.position.set(0, 0, 0);
// scene.add(mesh);
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);
//创建点光源对象
const pointLight = new THREE.PointLight(0xffffff, 1.0);
pointLight.decay = 0.0;//不衰减
//光源位置
pointLight.position.set(200, 200, 200);
scene.add(pointLight);
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 3000);
// camera.position.set(300, 300, 300);
// camera.lookAt(0, 0, 0);
const i = 100;
// 相机位置设置在当前点位置
camera.position.copy(pointsArr[i]);
// 曲线上当前点pointsArr[i]和下一个点pointsArr[i+1]近似模拟当前点曲线切线
// 设置相机观察点为当前点的下一个点,相机视线和当前点曲线切线重合
camera.lookAt(pointsArr[i + 1]);
//创建渲染
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
//视角控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(pointsArr[i+1]);
controls.update();
// renderer.outputEncoding=THREE.SRGBColorSpace;
let a=0;
//循环渲染
function render() {
// mesh.rotateY(0.01);
// mesh1.rotateY(0.01);
if(a<pointsArr.length-1){
camera.position.copy(pointsArr[a]);
camera.lookAt(pointsArr[a+1])
a+=1;
}else{
a=0;
console.log('重置a',a);
}
renderer.render(scene, camera);
requestAnimationFrame(render);
};
render();
document.body.appendChild(renderer.domElement);
</script>