相关疑难解决方法(0)

复杂的形状字符轮廓

说我有这个角色,我想让用户选择它,所以当它被选中时我想在它周围显示一个轮廓.

在此输入图像描述

角色是一个带有一些网格的object3D.我试图克隆并设置一个背面材料,但它不起作用,问题是形状中的每个立方体都是单独渲染背面,因此轮廓错误.

我是否需要为轮廓创建另一个网格,是否有更简单的方法？

javascript outline three.js

Ash*_*rat

lucky-day

13
推荐指数

1
解决办法

4307
查看次数

蒙皮网格着色器的均匀顶点位移(动画轮廓,Three.js)

我想我已经解决了Three.js中网格渲染边框/轮廓的实现,这是许多游戏用于突出显示对象/角色的技术.

例如,暗黑破坏神1和3
暗黑破坏神3

以下是我的解决方案的详细信息和演示.

现在还有待完成的是动画网格(用于角色等).问题是,蒙皮网格使用顶点着色器进行动画处理,我还使用着色器沿着法线缩放(移位)网格.这可能是非常简单但不幸的是我的数学技能几乎不存在.

问题

因此,为了使网格物体在着色器中按比例放大并设置动画,以下是我认为需要合并的两个方程式:

从蒙皮着色器:

mvPosition = modelViewMatrix * skinned
gl_Position = projectionMatrix * mvPosition

Run Code Online (Sandbox Code Playgroud)

从置换着色器:

mvPosition = modelViewMatrix * vec4( position + normal * offset, 1.0 )
gl_Position = projectionMatrix * mvPosition

Run Code Online (Sandbox Code Playgroud)

演示

更新(使用GoodGuy的等式):这是关于jsfiddle(javascript)的完整代码和演示.
在这里你可以找到着色器代码本身(glsl).

内部图是常规的蒙皮动画,轮廓是新的等式,它还不太合适.

opengl-es glsl webgl three.js

Esk*_*kel

2017 05-23

5
推荐指数

1
解决办法

2059
查看次数

Three.js-如何为对象设置边框？

我有用three.js创建的多边形/多面体吗？可以设置边框的宽度和颜色吗？这是我的示例代码，您可能会在其中看到一个图。如何设置边界？可能还有其他创建多边形的方法吗？

<html> 
<head> 
	<title>???</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% }
	</style> 
</head> 
<body>
	<script src="../build/three.min.js"></script>
	<script src="http://stemkoski.github.io/Three.js/js/OrbitControls.js"></script>
	<script>
	var phi = 0;
	var scene    = new THREE.Scene();
	var camera   = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 3000 );
	//var camera = new THREE.OrthographicCamera( window.innerWidth / - 200, window.innerWidth / 200, window.innerHeight / 200, window.innerHeight / - 200, 0.1, 1000 );
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight …

Run Code Online (Sandbox Code Playgroud)

javascript border three.js

Som*_*ian

lucky-day

0
推荐指数

1
解决办法

4096
查看次数