uni-app使用three

<template>
	<view class="content">

	</view>
</template>

<script>
	import * as THREE from "three"
	import {
		GLTFLoader
	} from 'three/examples/jsm/loaders/GLTFLoader';
	import {
		OrbitControls
	} from "three/examples/jsm/controls/OrbitControls"
	import {
		DRACOLoader
	} from "three/examples/jsm/loaders/DRACOLoader"
	import {
		FBXLoader
	} from "three/examples/jsm/loaders/FBXLoader"

	export default {
		data() {
			return {

			};
		},
		mounted() {
			const content = document.querySelector(".content");
			const canvas = document.createElement("canvas");
			canvas.style.width = '100vw'
			canvas.style.height = '100vh'
			content.appendChild(canvas);




			if (canvas) {
				const scene = new THREE.Scene()
				scene.background = new THREE.Color('#ccc')
				scene.environment = '#ccc'
				const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
				const renderer = new THREE.WebGLRenderer({
					canvas,
					antialias: true
				});
				//开启HiDPI设置 解决模型模糊
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight)

				camera.position.z = 20


				const controls = new OrbitControls(camera, renderer.domElement)
				controls.update()
				controls.enableDamping = true;

				const interiorSeats = new THREE.MeshPhysicalMaterial({
					color: "#2073b1",
					metalness: 1, // 金属度
					roughness: 0.5, //粗糙度
					clearcoat: 1, // 光滑
					clearcoatRoughness: 0, // 粗糙度
				})

				const loader = new GLTFLoader()
				// const dracoLoader = new DRACOLoader();
				// dracoLoader.setDecoderPath("/public/draco/gltf");
				// loader.setDRACOLoader(dracoLoader);
				loader.load('./../../static/009.gltf', gltf => {
					console.log(gltf);
					scene.add(gltf.scene)
					gltf.scene.traverse(c => {
						c.material = interiorSeats
					})
				})

				// const fbxLoader = new FBXLoader()
				// fbxLoader.load('./../../static/modelNew.fbx', fbx => {
				// 	console.log(fbx)
				// 	fbx.scale.set(0.01, 0.01, 0.01)
				// 	scene.add(fbx)
				// })

				// 灯光
				// 前灯光
				const light1 = new THREE.DirectionalLight(0xffffff, 1)
				light1.position.set(0, 0, 10)
				scene.add(light1)
				// 后灯光
				const light2 = new THREE.DirectionalLight(0xffffff, 1)
				light2.position.set(0, 0, -10)
				scene.add(light2)
				// 左灯光
				const light3 = new THREE.DirectionalLight(0xffffff, 1)
				light3.position.set(-10, 0, 0)
				scene.add(light3)
				// 右灯光
				const light4 = new THREE.DirectionalLight(0xffffff, 1)
				light4.position.set(10, 0, 0)
				scene.add(light4)
				// 上灯光
				const light5 = new THREE.DirectionalLight(0xffffff, 1)
				light5.position.set(0, 10, 0)
				scene.add(light5)
				// 下灯光
				const light6 = new THREE.DirectionalLight(0xffffff, 1)
				light6.position.set(0, -10, 0)
				scene.add(light6)
				// 添加光源
				const light7 = new THREE.DirectionalLight(0xffffff, 1);
				light7.position.set(0, 10, 5);
				scene.add(light7);

				// 添加光源
				const light8 = new THREE.DirectionalLight(0xffffff, 1);
				light8.position.set(-5, 10, 0);
				scene.add(light8);

				// 添加光源
				const light9 = new THREE.DirectionalLight(0xffffff, 1);
				light9.position.set(0, 10, -5);
				scene.add(light9);

				const light = new THREE.AmbientLight(0x000000)
				scene.add(light)

				const animate = () => {
					requestAnimationFrame(animate);
					controls.update()
					renderer.render(scene, camera);
				}
				animate();

				// canvas.addEventListener('touchstart', e => {
				// 	console.log(e)
				// 	controls.update()
				// 	renderer.render(scene, camera);
				// })
				// canvas.addEventListener('touchmove', e => {
				// 	console.log(e)
				// 	controls.update()
				// 	renderer.render(scene, camera);
				// })


			}
		}
	}
</script>


<style>

</style>