How to load SVG file into SVGRenderer in three.js
2023-03-14 22:55:44 时间
原文:
https://stackoverflow.com/questions/33140342/how-to-load-svg-file-into-svgrenderer-in-three-js
I'm trying to use SVGRenderer
in three.js (http://threejs.org/examples/#svg_sandbox). The example shows you how to make an SVG element (a circle) on the fly. I want to import an SVG file that I already have in my computer. How would I do that?
The createElementNS command doesn't seem to support importing SVG files?
I essentially want my image.svg
to be displayed on a three.js scene.
You can use the THREE.SVGLoader() Library to achieve it :
核心代码:
scene = new THREE.Scene();
scene.add(svgObject);
var ambient = new THREE.AmbientLight(0x80ffff);
scene.add(ambient);
var directional = new THREE.DirectionalLight(0xffff00);
directional.position.set(-1, 0.5, 0);
scene.add(directional);
renderer = new THREE.SVGRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth, window.innerHeight - 5);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var time = Date.now() * 0.0002;
camera.position.x = Math.sin(time) * 200;
camera.position.z = Math.cos(time) * 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
CSS:
* {
margin: 0
}
依赖文件:
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/SVGRenderer.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="http://threejs.org/examples/js/loaders/SVGLoader.js"></script>
<script>
/**
* @name LegacySVGLoader
* @author mrdoob / http://mrdoob.com/
* @author zz85 / http://joshuakoo.com/
* @see https://github.com/mrdoob/three.js/issues/14387
*/
THREE.LegacySVGLoader = function(manager) {
this.manager = (manager !== undefined) ? manager : THREE.DefaultLoadingManager;
};
THREE.LegacySVGLoader.prototype = {
constructor: THREE.LegacySVGLoader,
load: function(url, onLoad, onProgress, onError) {
var scope = this;
var parser = new DOMParser();
var loader = new THREE.FileLoader(scope.manager);
loader.load(url, function(svgString) {
var doc = parser.parseFromString(svgString, 'image/svg+xml'); // application/xml
onLoad(doc.documentElement);
}, onProgress, onError);
}
};
</script>
相关文章
- Eclipse基金会项目告别CVS,迁至Git
- Hadoop没有消亡,它是大数据的未来
- 机器学习项目中的数据预处理与数据整理之比较
- 谈谈IE针对Ajax请求结果的缓存
- 大数据分析之技术框架整理
- 我眼中的工程师文化
- 达观推荐算法实现:协同过滤之item embedding
- 常用排序算法比较与分析
- Java Web服务性能优化实践
- 数据和分析带来五大积极业务成果
- 干货|国内外十大主流采集软件盘点
- 大数据如何在制造企业中落地?
- 传统制造业面临大数据的7种改变方式
- 除了董明珠 家电领域有更值得关注的
- 六个提示 预防企业数据发生灾难
- Spark for python developers —Spark与数据的机器学习
- NLP与知识图谱的对接
- 助你所在团队走上大数据路途的六大规则
- Uber开源数据可视化工具deck.gl获重大升级
- Spark程序运行常见错误解决方法以及优化