本插件是基于 ThreeJs 的二次封装, 可以让使用者通过API调用方式快速创建自己的Three场景, 工具库中提供了基础交互功能,更多功能持续更新中 安装 npm install plain-three -S or yarn add plain-three -S or pnpm install plain-three 引入 import Pla…

// 引入图标const textureLoader = new THREE.TextureLoader();const map = textureLoader.load("/icon/location.png");let material = new THREE.SpriteMaterial({map:map})let mesh = new TH…

// 创建物体const boxGeometry = new THREE.BoxGeometry(2, 2, 2);const cubeMaterial = new THREE.MeshBasicMaterial({ color: "#ff0000" });cube = new THREE.Mesh(boxGeometry, cubeMateria…

import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";import {CSS2DRenderer,CSS2DObject} from "three/examples/jsm/renderers/CSS2DRenderer.js"// 创建物体const …

用于物体的拾取和页面事件的交互 // 创建多个立方体const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1);const material = new THREE.MeshBasicMaterial({    wireframe:true});const redmateria…

1. 粒子球      // 创建几何体      const sphereGeometry = new THREE.SphereGeometry(3,20,20)      // 设置点材质      const pointsM…

步骤: 材质能够对光照的反应设置渲染器开启阴影的计算: renderer.shadowMap.enabled = true设置光照投射阴影: directionalLight.castShadow = true设置物体投射阴影: sphere.castShadow = true设置物体接受阴影: plane.receiveShadow = true…

1. 基本使用 使用 MeshStandardMaterial 实例渲染 RGB 材质 // 添加环境光const light = new THREE.AmbientLight("#ffffff")scene.add(light)// 直线光const directionalLinght = new THREE.DirectionalLight("…

1. 创建材质 const textureLoader = new THREE.TextureLoader();const doorColorTexture = textureLoader.load("/gltf/Default_albedo.jpg")// 创建几何体const cubeGeometry = new THREE.BoxBuffer…

1. 创建场景      import * as THREE from 'three';  // 场景      const scene= new THREE.Scene();      // 相机      const…