After loading the drc file, I try to apply a texture, but the texture is not applied.
Is there a way to apply a texture to a mesh?
Is it because there is no uv? Can you turn on uv?
The original is composed of mtl, obj, and texture, compressed with draco encoder and converted to drc.
If there are no UVs, textures won’t work. This isn’t as trivial as turning them on — you have to design them. See any of the “UV unwrapping in Blender” tutorials you can find online. But I can’t tell if your model has UVs or not.
Usually people don’t use .drc files… the format is sort of a custom thing for the Draco library, and doesn’t support materials or animation or much else. It’s better to set up your model (e.g. in Blender) including the material, then export to glTF with the Draco compression option enabled. This will keep the material and everything else attached. It’s easier to use Draco in glTF files than to use .drc files.
https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html
Thank you, How do I convert ply or obj to gltf?
There seems to be a uv. But why does it look black?
obj2gltf is one option. Blender can import most of these formats and export to glTF. We list other tools here:
There seems to be a uv. But why does it look black?
I can’t guess this. I’d recommend sharing something we can reproduce the issue with, ideally a demo. You’ll need lights.
I’ll share the file with you. thank you Please check only once.
Can you share the code?
I just made some simple modifications based on yours.
function drc_loader () {
const loader = new DRACOLoader()
loader.setDecoderPath('js/libs/draco/');
loader.setDecoderConfig({ type: 'wasm' });
loader.load(`./basketball_test.drc`, function (geometry) {
geometry.computeVertexNormals();
const material = new THREE.MeshStandardMaterial()
const texture = new THREE.TextureLoader().load('./basketball_test.png')
material.map = texture
const mesh = new THREE.Mesh(geometry, material);
const box = new THREE.Box3()
box.setFromObject(mesh)
const center = box.getCenter(new THREE.Vector3()).negate()
mesh.geometry.translate(center.x, center.y, center.z)
mesh.scale.multiplyScalar(0.1)
mesh.rotateY(Math.PI)
mesh.castShadow = true
mesh.receiveShadow = true
scene.add(mesh)
animate()
})
}
thank you!!
Can I see the full code?
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - ply rendering</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
background-color: #ccc;
color: #000;
}
a {
color: #f00;
}
</style>
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls
</div>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
let camera, controls, scene, renderer, state, container, cameraTarget;
init();
function init () {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xcccccc);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 100, 300);
// controls
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.screenSpacePanning = false;
controls.minDistance = 0;
controls.maxDistance = 600;
controls.maxPolarAngle = Math.PI / 2;
// lights
const dirLight1 = new THREE.DirectionalLight(0xffffff);
dirLight1.position.set(1, 1, 1);
scene.add(dirLight1);
const ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
window.addEventListener('resize', onWindowResize);
drc_loader()
}
function drc_loader () {
const loader = new DRACOLoader()
loader.setDecoderPath('js/libs/draco/');
loader.setDecoderConfig({ type: 'wasm' });
loader.load(`./basketball_test.drc`, function (geometry) {
geometry.computeVertexNormals();
const material = new THREE.MeshStandardMaterial()
const texture = new THREE.TextureLoader().load('./basketball_test.png')
material.map = texture
const mesh = new THREE.Mesh(geometry, material);
const box = new THREE.Box3()
box.setFromObject(mesh)
const center = box.getCenter(new THREE.Vector3()).negate()
mesh.geometry.translate(center.x, center.y, center.z)
mesh.scale.multiplyScalar(0.1)
mesh.rotateY(Math.PI)
mesh.castShadow = true
mesh.receiveShadow = true
scene.add(mesh)
animate()
})
}
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate () {
requestAnimationFrame(animate);
renderer.render(scene, camera)
}
</script>
</body>
</html>
thank you!