three.js jpg或png格式的贴图压缩详细代码
时间: 2023-12-11 15:06:01 浏览: 35
以下是使用three.js进行jpg或png格式贴图压缩的详细代码:
1. 导入必要的three.js库和压缩库
```javascript
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/OrbitControls.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/DRACOLoader.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/GLTFLoader.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/TextureLoader.min.js"></script>
```
2. 加载模型和纹理
```javascript
var loader = new THREE.GLTFLoader();
var textureLoader = new THREE.TextureLoader();
var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath('js/libs/draco/');
loader.setDRACOLoader(dracoLoader);
loader.load('model.glb', function(gltf) {
gltf.scene.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.map = textureLoader.load('textures/texture.jpg');
child.material.map.minFilter = THREE.LinearFilter;
child.material.map.magFilter = THREE.LinearFilter;
child.material.map.anisotropy = 16;
child.material.map.encoding = THREE.sRGBEncoding;
}
});
scene.add(gltf.scene);
}, function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function(error) {
console.log('An error happened');
});
```
注意:加载jpg或png格式的纹理时直接使用TextureLoader即可。
3. 渲染场景
```javascript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
camera.position.set(0, 0, 5);
var animate = function() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
```
示例代码中使用了jpg格式进行压缩,同理可替换为png格式。加载纹理时设置minFilter和magFilter为THREE.LinearFilter可以提高加载速度和减少内存占用,设置anisotropy为16可以提高纹理质量。